<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.container{
			width: 100px;
			margin-top: 50px;
			margin-left: 100px;
		}

		html,body{
			margin: 0;
			padding: 0;
			background-color: #ccc;
			color: #000;
		}

		#checkbox{
			display: none;
		}

		.cb-label{
			width: 100px;
			height: 100px;
			border:  10px solid #666;
			position: relative;
			display: inline-block;
			box-sizing: border-box;
			transition: border-color ease .2s;
			cursor: pointer;
		}

		.cb-label::after,
		.cb-label::before{
			box-sizing: border-box;
			position: absolute;
			height: 0;
			width: 20px;
			content: '';
			background-color: #fff;
			transform-origin: left top;
			transition: opacity ease .5s;
		}

		.cb-label::after{
			top:  45px;
			left: 0;
			transform: rotate(-45deg);
		}

		.cb-label::before{
			top:  76px;
			left: 31px;
			transform: rotate(-135deg);
		}

		input[type=checkbox]:checked+.cb-label{
			color: #658db5;
			background-color: currentColor;
			border-color: currentColor;
		}

		input[type=checkbox]:checked+.cb-label::after{
			border-color: #fff;
			height: 35px;
			animation: dothabottomcheck .2s ease 0s forwards;
		}

		input[type=checkbox]:checked+.cb-label::before{
			border-color: #fff;
			height: 100px;
			animation: dothcheck .4s ease 0s forwards;
		}

		@keyframes dothabottomcheck{
			0% { height: 0;}
			100% { height:  35px; }
		}

		@keyframes dothcheck{
			0%{ height:  0; }
			50%{ height:  0; }
			100%{ height:  70px; }
		}
	</style>
</head>
<body>
	<div class="container">
		<input type="checkbox" id="checkbox">
		<label for="checkbox" class="cb-label"></label>
	</div>
</body>
</html>